【第3119期】form-sizing：使用 CSS 实现文本区域的自动增加高度

前言

有了 form-sizing，textarea体验感 up 了。今日前端早读课文章由 @飘飘翻译分享。

正文从这开始～～

textarea 在接受用户大量文本输入时非常方便。但是，textarea 的问题在于其有固定的高度。因此，如果用户输入的文本超过 textarea 的初始高度，文本就会溢出，用户必须滚动才能查看文本的其余部分。

<textarea rows="10">

使用 rows 属性可以增加 textarea 的高度。但是，这并不是一个好的解决方案，因为您不知道用户将输入多少文本。因此，不能将 rows 属性设置为固定值。

幸运的是，即将推出一种实验性的 CSS 规则，即 form-sizing 属性，它将允许根据用户输入的文本量自动增加文本域的高度。

 /* 调整大小以适应内容 */
 textarea { form-sizing: auto; }

 /* 正常行为 */
 textarea { form-sizing: normal; }

这是它在实际操作中的呈现方式。

form-sizing 属性是一项即将在 Chrome Canary 中首次推出的新 CSS 规则。该提案于 2023 年 5 月 10 日得到了 CSSWG 的批准。

一个例子 Auto-resizing text input with form-sizing: content：https://codepen.io/coliss/pen/KKbbPbd 需要 Chrome 版本 120 才能看到。

关于本文
译者：@飘飘
作者：@Amit
原文：https://www.amitmerchant.com/textarea-auto-increase-height/

这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。